/*
 * @Author: cgl
 * @Date: 2023-04-12 15:25:43
 * @LastEditors: cgl
 * @LastEditTime: 2023-06-28 10:20:47
 * @FilePath: \public-health-emergencies-fed:\radiation-hygiene-fe\src\directive\dialog\drag.js
 * @Description: 
 * 
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved. 
 */
/**
* v-dialogDrag 弹窗拖拽
* Copyright (c) 2019 ruoyi
*/

export default {
  bind(el, binding, vnode, oldVnode) {
    const value = binding.value
    if (value == false) return
    // 获取拖拽内容头部
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    let dragDom = el.querySelector('.el-dialog');
    dialogHeaderEl.style.cursor = 'move';
    // 鼠标按下事件
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标的原始距离
      let disX = e.clientX;
      let disY = e.clientY;
			let ol = 0;
			let ot = 0;
			if (dragDom.style.transform) {
				ol = +dragDom.style.transform.match(/translate\((\S*)px,/)[1];
				ot = +dragDom.style.transform.match(/\s(\S*)px\)/)[1];
			}

      let moveTop, moveLeft;

      let top = dragDom.offsetTop;
      let left = dragDom.offsetLeft;
      let bottom = document.body.clientHeight - top - dragDom.offsetTop;
      let right = document.body.clientWidth - left - dragDom.offsetLeft;
      console.dir(dragDom)
      // 鼠标拖拽事件
      document.onmousemove = function (e) {
        // 移动的距离
        let l = e.clientX - disX;
        let t = e.clientY - disY;
        moveTop = l < -left ? -left :
                  l > right ? right : ol + l;
        moveLeft = t < -top ? -top :
                   t > bottom ? bottom : ot + t;
        // 移动元素
        dragDom.style.transform = `translate(${moveTop}px, ${moveLeft}px)`;
        // dragDom.style.left = `${moveTop}px`;
        // dragDom.style.top = `${moveLeft}px`;
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
        // 重置
        let reg = dragDom.style.transform.match(/translate\((.*?)\)/)
        let res = reg && reg[1].split(',').reduce((pre, cur) => {
          pre.push(Number(cur.replace(/\px/g, '')))
          return pre
        }, [])
        top = top - Math.abs(res[1]);
        left = left - Math.abs(res[0]);
        bottom = document.body.clientHeight - top - dragDom.clientHeight;
        right = document.body.clientWidth - left - dragDom.clientWidth;
        console.log(res, top, left, bottom, right)
      };
    }
  }
};